React Crash Course

Traversy Media

Traversy Media

Verificado

2,35 mi de inscritos

Inscrever-se

Inscrito

17 mil

Compartilhar

Download

Download

Valeu

Clipe

842.813 visualizações 18 de mar. de 2024

Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend. Code: https://github.com/bradtraversy/react... React Front To Back Full Course: https://www.traversymedia.com/Modern-... Check out all my courses: https://traversymedia.com Social Media: Github - https://github.com/bradtraversy Twitter -   / traversymedia   Instagram -   / traversymedia   Facebook -   / traversymedia   Linkedin -   / bradtraversy   Timestamps: 0:00 - Intro 1:55 - What Is React? (Slide) 3:43 - Why React? (Slide) 7:19 - What Are Components? (Slide) 8:21 - What Is State? (Slide) 10:00 - What Are Hooks? (Slide) 11:17 - What Is JSX? (Slide) 12:42 - SPA, SSR, SSG (Slide) 15:38 - Vite (Slide) 16:30 - Project Demo 19:53 - Setup React With Vite 22:29 - File Explanation 25:11 - Boilerplate Cleanup 26:48 - Tailwind CSS Setup 30:24 - JSX Crash Course 39:37 - Start Homepage 42:00 - Navbar Component 43:56 - Image Import 45:24 - Hero Component 46:17 - Props 48:00 - Default Props 48:51 - Wrapper Components 55:14 - JobListings Component 58:50 - Create Lists With map() 1:03:20 - Single JobListing Component 1:05:49 - Limit Jobs to 3 1:07:50 - useState() Hook & Desc Toggle 1:13:07 - Creating an Event 1:14:20 - Updating Component State 1:16:00 - React Icons Package 1:18:00 - React Router Setup 1:20:21 - Create Routes From Elements 1:21:36 - Router Provider 1:22:36 - Homepage Component/Route 1:24:40 - Layouts 1:29:06 - Jobs Page Component/Route 1:30:50 - Link Component 1:34:20 - Custom 404 Page 1:36:55 - Active Links With NavLink 1:41:00 - Conditional Rendering 1:43:10 - JSON Server Setup 1:47:00 - useEffect() & Data Fetching 1:53:07 - Loading Spinner 1:51:06 - Conditional Fetching 1:59:45 - Proxying 2:03:38 - Single Job Page 2:09:04 - useParams() to Get ID 2:12:25 - Data Loaders 2:16:36 - Single Job Output 2:22:00 - Add Job Page 2:23:40 - Working With Forms 2:30:05 - Form Submission 2:35:27 - Pass Function as Prop 2:39:32 - POST Request to Add Job 2:41:45 - Delete Job Button/function 2:45:12 - DELETE Request to Remove Job 2:46:50 - React Toastify Package 2:50:08 - Edit Job Page/Form 2:56:05 - Update Form Submission 2:58:54 - PUT Request to Update Job 3:02:10 - Build Static Assets For Production

Capítulos

Ver tudo

Intro

0:00

What Is React? (Slide)

1:55

Why React? (Slide)

3:43

What Are Components? (Slide)

7:19

What Is State? (Slide)

8:21

What Are Hooks? (Slide)

10:00

What Is JSX? (Slide)

11:17

SPA, SSR, SSG (Slide)

12:42

Transcrição

Acompanhe usando a transcrição.

Mostrar transcrição

Traversy Media

2,35 mi de inscritos

Vídeos

Sobre

Twitter

Instagram

Linkedin

Mostrar menos

991 comentários

Classificar comentários

Ordenar por

Principais comentários

Mais recentes primeiro

Adicione um comentário…

@husseinkizz

há 1 ano

Thanks Brad, always one of the best teachers on internet, you taught me react 4 years ago, I now make react libraries and stuff, thanks man, can't appreciate your works enough!

Gostei

185

Não gostei

Responder

@azhanakhtar6326

há 23 horas

This man knows how to teach, Thanks bud

Gostei

1

Não gostei

Responder

@fromagetriste

há 1 ano

super happy about the video, thank you so much <3

Gostei

5

Não gostei

Responder

@awesomestuff8819

há 3 semanas

I have learned javascript from you as well from the crash course and now this. The fact that you posted this high quality content for anyone to learn React with good practice for FREE! is a big deal and I'll be heading over to your website to dive into paid courses because of this kind gesture. Thank you sir! Keep up the great work!

Gostei

Não gostei

Responder

@BMRG14

há 1 ano

Right on time! Thank you very much.

Gostei

7

Não gostei

❤ por @TraversyMedia

Responder

@xchoochoopainx

há 2 meses

I have a job interview tomorrow and this really helped me! I don't think I'm gonna get the job, but this is a great refresher. thanks for this!

Gostei

Não gostei

Responder

@christopherlopez2491

há 1 ano

I started watching you and your html intro video in 2019. Im still here… still learning and still building thank you so much for these videos

Gostei

5

Não gostei

Responder

1 resposta

@ahonui

há 2 semanas (editado)

Brad is the absolute best teacher for coding on Youtube.

Gostei

Não gostei

Responder

@社會觀察家

há 1 ano

THX Brad, learned everything from you, it gives me a very peaceful vibe just listening to your voice, so I still watch/listen your every video.

Gostei

4

Não gostei

Responder

@ultronsam1214

há 3 meses

For those that might confused about where the isActive props passed to NavLink's linkClass comes from? isActive is built-in to NavLink, so it returns true.

Gostei

1

Não gostei

Responder

@84paulflan

há 2 meses (editado)

For those experiencing the aside not functioning correctly: Replace: <div className="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6"> with <div className="grid grid-cols-1 md:grid-cols-3 w-full gap-6"> <main> with <main className="md:col-span-2"> and <aside> with <aside className="md:col-span-1">

Ler mais

Gostei

3

Não gostei

Responder

5 respostas

@princeboypopi

há 2 meses

Thank you Brad, I kinda find myself to this youtube channel whenever I need something and have no where else to get it from and on addition I really find it hard to believe that all this is free.

Gostei

Não gostei

Responder

@reginold5988

há 1 ano

Next MERN 2024 course pls with typescript this time

Gostei

6

Não gostei

Responder

@naveencooray2733

há 6 meses

Here we are, back where it all started. after 3 years of Angular just wanted to refresh my knowledge on React. Thanks Brad!

Gostei

Não gostei

Responder

@Ndunda_Kelvin

há 10 meses

I don't know if it's me who is getting better in react, or you just have good teaching skills that make everything simple and easy to understand. Thank you for this.

Gostei

1

Não gostei

Responder

@Salvator94

há 4 meses

Thank you so much! Your explanation made everything crystal clear and incredibly easy to understand. I genuinely appreciate the effort you put into breaking it down—it’s such a game-changer!

Gostei

Não gostei

Responder

@WebDevYTLearningAccount

há 8 meses

Thank you for another great lesson. I had to switch teams in my job and quickly learn React, this really helped understand more about the fundamentals with actual application.

Gostei

Não gostei

Responder

@jderifaj

há 5 meses

This is a great little video. I've dipped my toe in React over the years, this is a nice highlight of the basics.

Gostei

Não gostei

Responder

@ashutosh_tiwari

há 1 ano

One of the Best Crash Course on React in 2024!! Thankyou very much Brad.

Gostei

1

Não gostei

Responder

@MONGERATSEA

há 6 meses

This is the best react-refresher on youtube. Covers all important basic topics. Thank you for the video

Gostei

Não gostei

Responder